<template>
  <div class="login">
    <el-col class="loginCoainter" :xs="18">
      <div class="title">Login</div>
      <el-form
        label-width="120px"
        label-position="top"
        :model="userinfo"
        :rules="userInfoRules"
        ref="userForm"
      >
        <el-form-item label="Email/Username" prop="Username">
          <el-input v-model="userinfo.Username" />
        </el-form-item>

        <el-form-item label="Password" prop="Password">
          <el-input show-password v-model="userinfo.Password" />
        </el-form-item>
      </el-form>
      <div class="fgp" @click="goForgotPage">Forgot Password</div>
      <el-button color="#00aa8b" @click="login">Login</el-button>
      <div class="or">or</div>
      <div class="abouttip">
        Haven't registered yet? <span @click="createAccount">Creat Account</span>
      </div>
    </el-col>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const userinfo = reactive({
  email: '',
  Password: '',
});

const userInfoRules = reactive({
  Username: [
    {
      required: true,
      message: 'Please input Username',
      trigger: 'blur',
    },
    {
      type: 'email',
      message: 'Please input correct email format',
      trigger: ['blur', 'change'],
    },
  ],
  Password: [
    {
      required: true,
      message: 'Please input Password',
      trigger: 'blur',
    },
    { min: 6, max: 8, message: 'Password should be 6 to 8', trigger: 'blur' },
  ],
});
// 处理登录逻辑
const userForm = ref(null);
function login() {
  userForm.value.validate((valid) => {
    // if (valid) {
    //   // 验证通过处理你接下来的行为
    // } else {
    //   ElMessage({
    //     type: 'warning',
    //     message: '填写的信息不合法!',
    //   });
    // }
  });
}
// 跳转忘记密码页面
function goForgotPage() {
  router.push('/forgotPsd');
}

// 跳转注册页面
function createAccount(params) {
  router.push('/regist');
}
</script>
<style scoped lang="less">
.login {
  overflow: hidden;
  .loginCoainter {
    width: 464px;
    margin: 60.25px auto 0px;
    .title {
      margin-bottom: 25px;
      font-family: "Neue Machina";
      font-size: 28px;
      color: #cdcdcd;
    }
    /deep/ .el-form {
      .el-form-item__label {
        color: white;
      }

      .el-input {
        height: 44px;
        svg,
        .el-input__icon {
          width: 20px;
          height: 20px;
        }
      }
    }
    .fgp {
      font-size: 15px;
      color: #00aa8b;
      text-decoration: underline;
      margin: 15px 0;
      cursor: pointer;
    }
    .el-button {
      width: 100%;
      height: 44px;
    }
    .or,
    .abouttip {
      display: flex;
      justify-content: center;
      margin: 20px 0;
      font-size: 15px;
    }
    .or {
      color: #6b6b6b;
    }
    .abouttip {
      color: #cdcdcd;
      span {
        cursor: pointer;
        color: #00aa8b;
      }
    }
  }

  @media screen and(max-width:768px) {
    .loginCoainter {
      margin-top: 36px;
    }
  }
}
</style>
